<template>
  <div class="progress-wrapper"
    :style="wrapStyle">
    <div class="progress"
      :style="pBarStyle">
      <div class="left"
        :style="leftStyle">
        <div class="ball"
          :style="ballStyle"></div>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProgressBar',
  props: {
    leftBg: String,
    bgc: String,
    ballBgc: String,
    height: String,
    width: String,
    max: {
      type: Number,
      default: 100
    },
    min: {
      type: Number,
      default: 0
    },
    value: {
      type: Number,
      default: 80
    }
  },
  data() {
    return {
      pValue: this.value,
      pMax: this.max,
      pMin: this.min,
      wrapStyle: {
        width: this.width
      },
      pBarStyle: {
        backgroundColor: this.bgc,
        height: this.height
      },
      leftStyle: {
        width: this.progressPercent + '%',
        backgroundColor: this.leftBg,
        height: this.height,
        position: 'relative',
        backgroundImage: this.leftBg
      },
      ballStyle: {
        backgroundColor: this.ballBgc,
        height: parseInt(this.height) * 2 + 'px',
        width: parseInt(this.height) * 2 + 'px',
        borderRadius: parseInt(this.height) * 2 + 'px',
        right: -parseInt(this.height) + 'px',
        position: 'absolute',
        top: '-2px'
      },
      isMouseDownBall: false
    }
  },
  computed: {
    progressPercent() {
      return ((this.pValue - this.pMin) / (this.pMax - this.pMin)) * 100
    },
    progressElement() {
      return this.$el.getElementByClassName('progress')[0]
    }
  },
  methods: {},
  watch: {
    max(cur) {
      this.pMax = cur
    },
    min(cur) {
      this.pMin = cur
    },
    value(cur) {
      this.pValue = cur
    },
    progressPercent(cur) {
      this.leftStyle.width = cur + '%'
    }
  },
  mounted() {
    // 数据
    if (this.max < this.min) {
      console.error('max can not less than min !')
    }
    // 初始化
    this.leftStyle.width =
      ((this.pValue - this.pMin) / (this.pMax - this.pMin)) * 100 + '%'
  }
}
</script>

<style lang="less">
.progress-wrapper {
  margin-top: -8px;
  padding: 0 6px;
  .ball {
    &:after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      right: -5px;
      bottom: -5px;
      border: 1px solid #00feff;
      border-radius: 50%;
      animation: outlineOpacity 3s ease-in-out infinite;
    }
  }
}
</style>
